<template>
  <div class="news_detail">
    <!-- 文章头部 -->
    <header>
      <h3>{{ newsDetail.title }}</h3>
      <span>发表时间：{{ newsDetail.add_time | dateFormat }}</span>
      <span>点击次数：{{ newsDetail.click }}</span>
    </header>
    <!-- 文章主体内容 -->
    <div>
      <p v-html="newsDetail.content"></p>
    </div>
    <!-- 发表评论模块 -->
    <div class="comment">
      <h4>发表评论</h4>
      <hr />
      <van-field
        v-model="comment"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
        border
      />
      <van-button type="info" size="large" @click="addComment()">发布评论</van-button>
      <!-- 评论列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
        <van-cell v-for="(item, i) in commentList" :key="i" :title="item.content">
          <div class="commentTitle">
            <span>第{{i+1}}楼</span>
            <span>用户：{{item.user_name}}</span>
            <span>发表时间：{{ item.add_time |dateFormat }}</span>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsDetail: {},
      addTime: '',
      comment: '',
      loading: false,
      finished: false,
      commentList: []
    }
  },
  created() {
    // 获取到地址栏中的id
    console.log(this.$route.params.id)
    this.getNewsDetail(this.$route.params.id)
    this.getCommentList()
  },
  methods: {
    async getNewsDetail(id) {
      const { data: res } = await this.$http.get(`/api/getnew/${id}`)
      this.newsDetail = res.message[0]
      console.log('新闻详细数据：')
      console.log(this.newsDetail)
    },
    async getCommentList() {
      const { data: res } = await this.$http.get(
        `/api/getcomments/${this.$route.params.id}?pageindex=1`
      )
      this.commentList = res.message
      console.log('获取评论数据：')
      console.log(res)
      this.finished = true
    },
    async addComment() {
      if (this.comment.trim().length === 0)
        return this.$toast.fail('请填写评论内容！')
      const {
        data: res
      } = await this.$http.post(`/api/postcomment/${this.$route.params.id}`, {
        content: this.comment
      })
      console.log(res)
      this.comment = ''
      this.getCommentList()
    }
  }
}
</script>

<style lang="less" scoped>
.news_detail {
  padding: 0 10px;
}
header {
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
  color: #1989fa;
  h3 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
    margin: 10px 0px 15px 0px;
  }
  span {
    font-size: 13px;
  }
  span:last-child {
    float: right;
  }
}
.comment {
  .van-field {
    border: 1px solid #ccc;
  }
  .van-button {
    margin-top: 5px;
  }
  .van-cell {
    display: flex;
    flex-direction: column-reverse;
  }
  .van-cell__value {
    height: 30px;
    background-color: #ccc;
    font-size: 12px;
    line-height: 30px;
    text-align: left;
  }
  .commentTitle {
    span {
      color: #000;
      margin-right: 6px;
    }
  }
  .van-cell__title {
    text-indent: 2em;
    font-size: 12px;
  }
}
</style>
